<template>
   <a-modal :title="type==='before' ? '前加签':'后加签'" :visible.sync="show" width="650px" :confirm-loading="loading" @ok="handleConfirm" @cancel="handleCancel">
    <j-form-container>
      <a-form-model ref="formRef" :model="formValue" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item :label="type==='before' ? '前加签':'后加签'" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="multiAddUserInfo"> 
               <j-search-select-user v-model="formValue.multiAddUserInfo" placeholder="请选择给谁加签"></j-search-select-user>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="加签意见" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="comments">
              <a-textarea v-model="formValue.comments" placeholder="请输入加签意见" :auto-size="{ minRows: 4, maxRows: 5 }" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="imageList">
              <j-image-upload v-model="formValue.imageList" :isMultiple = "true" @change="imgChange"></j-image-upload>
              <div class="el-upload__tip">添加图片 | 每张图不超过20MB</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fileList">
              <j-upload v-model="formValue.fileList" @change="fileChange"></j-upload>
              <div class="el-upload__tip">添加附件 | 单个附件不超过20MB</div>
            </a-form-model-item>
          </a-col>
            </a-row>
      </a-form-model>
    </j-form-container> 
</a-modal>
</template>

<script>
// import { addMulti } from "@/api/wflow/design";
 // import WSelectUserPicker from '@/components/wflow/WSelectUserPicker'
 import Vue from 'vue'
 import { USER_INFO } from '@/store/mutation-types'
 import { httpAction} from '@/api/manage'
export default {
  components: {   },
  name: "AddMultiModal",
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      formValue: {
        comments: "",
        multiAddUserInfo: null,
        imageList:"",
        fileList:"",
      },
      imageList: [],  //图片列表
      fileList: [],  //文件列表
      multiple:false,
      show:false,
      processInfo:{},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      validatorRules:{
        multiAddUserInfo:[{ required:true,message:'请选择加签人' }],
      },
      url:{
        addBeforeMulti:'workspace/addBeforeMulti',
        addAfterMulti:'workspace/addAfterMulti',
      },
      type:'', //类型
     
    };
  },
  // computed: {
  //   show: {
  //     get() {
  //       return this.visible;
  //     },
  //     set(visible) {
  //       this.$emit("update:visible", visible);
  //     },
  //   },
  //   // 用户名展示
  //   multiAddUserInfoUserName() {
  //     return this.formValue.multiAddUserInfo?.name || "";
  //   },
  // },
  methods: {
    //显示弹窗
    showModal(type,record){
      this.type = type
      this.processInfo = record
      this.formValue = {
        comments: "",
        multiAddUserInfo: null,
        imageList:"",
        fileList:"",
      }
      this.imageList = []
      this.fileList = []  
      this.show = true
    },
    //上传图片
    imgChange(value){
      this.imageList = []
      if(value){
        let list = value.split(',')
        list.map((item)=>{
          let lastOf = item.lastIndexOf('/') // '/'所在的最后位置
          const name = item.substr(lastOf + 1) //截取文件名称和后缀
          this.imageList.push({name:name, url:item,type:'image'})
        })
      }else{
        this.imageList = []
      }
    },
    //上传文件
    fileChange(value){
      this.fileList = []
      if(value){
        let list = value.split(',')
        list.map((file)=>{
          let lastOf = file.lastIndexOf('/') // '/'所在的最后位置
          const name = file.substr(lastOf + 1) //截取文件名称和后缀
          this.fileList.push({name:name, url:file,type:'file'})
        })
      }else{
        this.fileList = []
      }
    },
    // 确认操作
    handleConfirm() {
      this.$refs.formRef.validate((valid) => {
        if (!valid) return;
        const { imageList, fileList, ...restParams } = this.formValue;
        restParams.taskId = this.processInfo.taskId
        restParams.processInstanceId = this.processInfo.processInstanceId
        restParams.attachments=[...this.imageList, ...this.fileList]
        this.loading = true;
        const apiUrl = this.type === 'before' ? this.url.addBeforeMulti :this.url.addAfterMulti
          httpAction(apiUrl,restParams,'post')
            .then((res)=>{
              if(res.success){
                this.$message.success("操作成功");
                this.handleCancel();
                this.$emit("ok",'addMulti');
              }else{
                this.$message.warning(res.message)
              }
            })
            .finally(()=>{
               this.loading = false;
            })
      });
    },
    // 取消操作
    handleCancel() {
      this.$refs.formRef.resetFields();
      this.formValue = {
        comments: "",
        multiAddUserInfo: null,
        imageList: [],
        fileList: [],
      };
      this.show = false;
    },
    //选择价钱人
    delegateUserInfoChange(user){
      if(user){
        const currentUser = Vue.ls.get(USER_INFO).username
        if(user.indexOf(currentUser) >-1){
          this.$message.error("不允许加签本人");
          return;
        }
      }
    }
  },
};
</script>
<style lang="less" scoped>
  .el-upload__tip {
    font-size: 12px;
    color: #606266;
  }

  /deep/.ant-upload.ant-upload-select-picture-card {
    margin-bottom: 0;
  }
</style>
